<div>
    <div class="tab-head">
        <div>
            <label>{{'order.id'|translate}}</label>
            <input nz-input style="width: 180px;" [(ngModel)]="page.travelOrderId" placeholder="预约单号" />
        </div>
        <div>
            <label>{{'order.loginId'|translate}}</label>
            <input nz-input style="width: 120px;" [(ngModel)]="page.loginId" placeholder="预定人名称" />

        </div>
        <div>
            <label>{{'order.createTime'|translate}}</label>
            <nz-range-picker nzFormat='yyyy-MM-dd' style="width: 240px;" [(ngModel)]="dateRange" (ngModelChange)="onChangeDate($event)">
            </nz-range-picker>
        </div>
        <div>
            <button nz-button class="noradius" nzType="primary" (click)="sherch()">{{'placeholder.search'|translate}}</button>
        </div>
    </div>
    <div class="tab-title">
        {{'order.listTitle'|translate}}
    </div>
    <nz-table class="medical-table" #columnTable [nzSize]='small' [nzTotal]="page.pages"  [nzPageIndex]="page.pageNo"
         nzPageSize="10"  (nzPageIndexChange)="changeCurrentPage($event)" [nzFrontPagination]="false"
        [nzLoading]="tableLoading" [nzData]="dataList" [nzScroll]="{ x: '1250px' }">
        <thead>
            <tr>
                <th nzWidth="210px">{{'order.id'|translate}}</th>
                <th nzWidth="180px">{{'order.createTime'|translate}}</th>
                <th nzWidth="110px">{{'order.loginId'|translate}}</th>
                <th nzWidth="160px">{{'agency.name'|translate}}</th>
                <th nzWidth="100px">{{'guide.name'|translate}}</th>
                <th nzWidth="120px">{{'order.reserveDate'|translate}}</th>
                <th nzWidth="120px">{{'order.status'|translate}}</th>
                <th>{{'order.payStatus'|translate}}</th>
                <th nzRight="0" nzWidth='150px'>{{'cz.title'|translate}}</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of columnTable.data">
                <td nzWidth="210px">{{ data.id }}</td>
                <td nzWidth="180px">{{ data.createTime }}</td>
                <td nzWidth="110px">{{ data.loginId }}</td>
                <td nzWidth="160px">{{ data.agencyName}}</td>
                <td nzWidth="100px">{{ data.guideName}}</td>
                <td nzWidth="120px">{{ data.reserveDate}}</td>
                <td nzWidth="120px">{{ orderStatus[data.status] }}</td>
                <td>{{ orderStatus[data.payStatus] }}</td>
                <td nzRight="0" class='my-cz' nzWidth='150px'>
                    <a *ngIf="data.status == 'PENDING'" style="color: red;"
                        (click)='onChangeStatus(data,"PENDING")'>{{'cz.cancel'|translate}}</a>
                    <a *ngIf="data.status == 'RECEIVED'" style="color: green;"
                        (click)='sure(data)'>{{'cz.sure'|translate}}</a>
                    <a (click)='onChangeStatus(data,true)'>{{'cz.detail'|translate}}</a>
                    <a *ngIf="data.status == 'PAID'" (click)='receiveTravel(data)'>{{'cz.receive'|translate}}</a>
                </td>
            </tr>
        </tbody>
    </nz-table>

    <nz-modal nzWidth='900' [(nzVisible)]="isVisible"(nzOnCancel)="handleCancel()" [nzMaskClosable]="true" [nzFooter]="modalFooter" nzTitle="详情">

        <div class="gutter-example">
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row " nzSpan="8">
                    <span>{{'order.id'|translate}}:</span> {{del?.id}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.createTime'|translate}}:</span> {{del?.createTime}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.loginId'|translate}}:</span> {{del?.loginId}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'agency.name'|translate}}:</span> {{del?.agencyName}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'guide.name'|translate}}:</span> {{del?.guideName}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.reserveDate'|translate}}:</span> {{del?.reserveDate}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.mobile2'|translate}}:</span> {{del?.mobile}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.email'|translate}}:</span> {{del?.email}}
				</div>
				<div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.contactWay'|translate}}:</span> {{del?.contactWay || "无"}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
				<div nz-col class="gutter-row" nzSpan="8">
					<span>{{'order.memo'|translate}}:</span> {{del?.memo || "--"}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
					<span>{{'order.status'|translate}}:</span> {{del?.status | getOrderStatus}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
					<span>{{'order.peopleNum'|translate}}:</span> {{del?.peopleNum}}
                </div>
            </div>
			<div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
				<div nz-col class="gutter-row" nzSpan="8" *ngIf="del&&del.cancelMemo">
					<span>{{'order.cancelMemo'|translate}}:</span> {{del?.cancelMemo||del?.rejectMemo||"--"}}
                </div>
				<div nz-col class="gutter-row" nzSpan="8" *ngIf="del&&del.prepareMemo">
					<span>{{'order.prepareMemo'|translate}}:</span> {{del?.prepareMemo||"--"}}
                </div>
			</div>

        </div>

        <ng-template #modalFooter>
            <button nz-button nzType="default" (click)="handleCancel()">{{'cz.close'|translate}}</button>
        </ng-template>
    </nz-modal>

    <nz-modal [(nzVisible)]="isQX" [nzMaskClosable]="false" [nzTitle]="modalTitle" (nzOnCancel)="handleCancel()"
        (nzOnOk)="handleOk()">
        <form nz-form class="org-register-one" [formGroup]="validateForm">
            <h3>{{'order.cancelOrder'|translate}}</h3>
            <nz-form-item>
                <nz-form-control [nzValidateStatus]="validateForm.get('rejectMemo')">
                    <textarea nz-input id="rejectMemo" formControlName="rejectMemo"
                        placeholder="{{'order.cancelOrderP'|translate}}"></textarea>
                </nz-form-control>
            </nz-form-item>
        </form>
	</nz-modal>
	
	<nz-modal nzWidth='900' (nzOnCancel)="cancel()" [(nzVisible)]="isVisible2" [nzMaskClosable]="true" [nzFooter]="modalFooter2" nzTitle="确认行程">

        <div class="gutter-example">
            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row " nzSpan="8">
                    <span>{{'order.id'|translate}}:</span> {{del?.id}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.createTime'|translate}}:</span> {{del?.createTime}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.loginId'|translate}}:</span> {{del?.loginId}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'agency.name'|translate}}:</span> {{del?.agencyName}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'guide.name'|translate}}:</span> {{del?.guideName}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.reserveDate'|translate}}:</span> {{del?.reserveDate}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.mobile2'|translate}}:</span> {{del?.mobile}}
                </div>
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'user.email'|translate}}:</span> {{del?.email}}
                </div>
            </div>

            <div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
                <div nz-col class="gutter-row" nzSpan="8">
                    <span>{{'order.memo'|translate}}:</span> {{del?.memo}}
                </div>
            </div>
			<div class="xq-item" nz-row [nzGutter]="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 32 }">
					
				<nz-form-item nz-col class="gutter-row" nzSpan="16">
						<nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>{{'order.prepareMemo'|translate}}</nz-form-label>
						<nz-form-control [nzSm]="14" [nzXs]="24" [(nzValidateStatus)]="validateForm.controls.name">
								<textarea style="height:150px;" maxlength="500" nz-input [(ngModel)]="prepareMemo" placeholder="{{'order.prepareMemoP'|translate}}"></textarea>
						</nz-form-control>
				</nz-form-item>
			</div>
        </div>

        <ng-template #modalFooter2>
            <button nz-button nzType="primary" (click)="onChangeStatus(del,'RECEIVED')">{{'cz.sure'|translate}}</button>
            <button nz-button nzType="default" (click)="cancel()">{{'cz.close'|translate}}</button>
        </ng-template>
    </nz-modal>
</div>